<template>
	<div class="c_detail" @tap="toDetail(item.collection.collectionId,item.spu.spuId)" v-if="item">
		<!-- 内部左部大图 -->
		<div class="c_pic">
			<image :src="item.spu.cover" mode="aspectFill"></image>
		</div>
		<!-- 内部右部 -->
		<div class="c_right">
			<!-- 右边上部标题 -->
			<div class="rightSon">
				<div class="title">{{item.spu.spuTitle}}</div>
				<div v-if="item.spu.tags" style="display: flex;flex-wrap: wrap;">
					<span class="type" v-for="item1 in item.spu.tags.split(',')"><label style="display: block; height: 4.27vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item1}}</label></span>
				</div>
			</div>
			<!-- 右边下部按钮及图标 -->
			<div class="right_div">
				<div class="right_button">
					<image src="../../../static/img/num.png" mode="aspectFill"></image>
					<span>{{ item.collection.nftItemIdV }}/{{ item.spu.nftMaxSupply }}</span>
				</div>
				<div class="logo">
					<image src="../../../static/img/enter16.png" mode="aspectFill"></image>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			item:{
				type: Object,
				default:{}
			}
		},
		mounted() {
		},
		methods:{
			toDetail(id,spuId){
				this.$ma.route.detail({
					collectionId: id,
					detailType: 'my',
					spuId: spuId
				})
			}
		}
	}
</script>

<style lang="scss">
	.c_detail {
		width: 91.47vw;
		height: 41.6vw;
		border-radius: 6.4vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 4.27vw 0 2.13vw;
		margin-top: 2.67vw;
	
		.c_pic {
			width: 37.33vw;
			height: 37.33vw;
			// border-radius: 6vw 0 0 6vw;
			border-radius: 6vw;
			margin-right: 3.2vw;
			overflow: hidden;
	
			image {
				width: 37.33vw;
				height: 37.33vw;
			}
		}
	
		.c_right {
			width: 44.53vw;
			height: 37.33vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			.rightSon {
				.title {
					font-size: 4.27vw;
					font-weight: 500;
					color: #FFFFFF;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
	
				.type {
					border: 1px solid #A972FF;
					padding: 0 1.07vw 0.27vw 1.07vw;
					font-size: 2.67vw;
					font-weight: 300;
					color: #A972FF;
					border-radius: 1.07vw;
					margin-right: 2.13vw;
					margin-top: 1.07vw;
				}
			}
	
			.right_div {
				width: 44.53vw;
				height: 4.27vw;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
	
				.right_button {
					// width: 24.53vw;
					height: 4.27vw;
					background-color: #323232;
					border-radius: 1.07vw;
					display: flex;
					flex-direction: row;
					align-items: center;
	
					image {
						width: 8.8vw;
						height: 4.27vw;
						border-radius: 1.07vw;
					}
	
					span {
						padding: 0.27vw 1.07vw;
						font-size: 2.67vw;
						color: #FFCE80;
						font-weight: 300;
					}
				}
	
				.logo {
					width: 4.27vw;
					height: 4.27vw;
					display: flex;
					align-items: center;
					justify-content: center;
	
					image {
						width: 4.27vw;
						height: 4.27vw;
					}
				}
			}
		}
	}
</style>